<template>
	<div class="table-item-wrapper" @click="itemClicked">
		<div class="item-image">
			<img v-bind:src="image" alt="image">
		</div>
		<div class="item-description">
			<div class="item-title">
				{{title}}
			</div>
			<div class="sub-detail">
				<span class="content">{{subDetailOne}}</span>
			</div>
			<div class="sub-detail">
				<span class="content">{{subDetailTwo}}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'tableItem',
	props: ['image', 'title', 'subDetailOne', 'subDetailTwo'],
	methods: {
		itemClicked: function () {
			this.$emit('itemClicked')
		}
	}
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
$table-item-height = 78px
$table-item-image-width = 66px
$left-padding = 16px

.table-item-wrapper
	position relative
	display block
	width 100%
	height $table-item-height
	padding-left $left-padding + $table-item-image-width
	border-bottom 1px solid #dcdcdc
	box-sizing border-box
	.item-image
		position absolute
		width $table-item-image-width
		height $table-item-image-width
		top ($table-item-height/2 - $table-item-image-width/2)
		left $left-padding
		overflow hidden
		img
			width 100%
	.item-description
		width 100%
		padding 12px 14px
		box-sizing border-box
		.item-title
			width 100%
			height 18px
			margin-bottom 6px
			line-height 18px
			font-size 16px
			overflow hidden
			text-overflow ellipsis
			white-space nowrap
		.sub-detail
			display block
			height 18px
			width 100%
			line-height 18px
			font-size 14px
			color #8f8e95
			overflow hidden
			text-overflow ellipsis
			white-space nowrap
</style>